<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">帮助与反馈</h1>
        </div>
      </div>
    </div>

    <div class="px-4 py-6 pb-20">
      <div class="bg-white rounded-lg shadow-sm mb-6">
        <!-- 常见问题 -->
        <div class="p-4 border-b border-gray-100">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-question-circle text-blue-600 mr-3"></i>
              <span class="text-gray-800">常见问题</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 联系客服 -->
        <div class="p-4 border-b border-gray-100">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-headset text-green-600 mr-3"></i>
              <span class="text-gray-800">联系客服</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm text-gray-500 mr-2">在线</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </div>
        </div>

        <!-- 意见反馈 -->
        <div class="p-4 border-b border-gray-100">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-comment-dots text-orange-600 mr-3"></i>
              <span class="text-gray-800">意见反馈</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 用户指南 -->
        <div class="p-4 border-b border-gray-100">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-book text-purple-600 mr-3"></i>
              <span class="text-gray-800">用户指南</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 版本信息 -->
        <div class="p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-info text-gray-600 mr-3"></i>
              <span class="text-gray-800">版本信息</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm text-gray-500 mr-2">v1.0.0</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速入口 -->
      <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <h3 class="font-semibold text-gray-800 mb-3">快速入口</h3>
        <div class="grid grid-cols-2 gap-4">
          <button class="flex flex-col items-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <i class="fas fa-play-circle text-2xl text-blue-600 mb-2"></i>
            <span class="text-sm text-gray-700">播放问题</span>
          </button>
          <button class="flex flex-col items-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <i class="fas fa-download text-2xl text-green-600 mb-2"></i>
            <span class="text-sm text-gray-700">缓存问题</span>
          </button>
          <button class="flex flex-col items-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <i class="fas fa-user text-2xl text-purple-600 mb-2"></i>
            <span class="text-sm text-gray-700">账户问题</span>
          </button>
          <button class="flex flex-col items-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <i class="fas fa-credit-card text-2xl text-orange-600 mb-2"></i>
            <span class="text-sm text-gray-700">支付问题</span>
          </button>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="bg-white rounded-lg shadow-sm p-4">
        <h3 class="font-semibold text-gray-800 mb-3">联系我们</h3>
        <div class="space-y-3">
          <div class="flex items-center">
            <i class="fas fa-envelope text-gray-500 mr-3 w-5"></i>
            <span class="text-gray-600">support@hippo.com</span>
          </div>
          <div class="flex items-center">
            <i class="fas fa-phone text-gray-500 mr-3 w-5"></i>
            <span class="text-gray-600">400-888-8888</span>
          </div>
          <div class="flex items-center">
            <i class="fas fa-clock text-gray-500 mr-3 w-5"></i>
            <span class="text-gray-600">工作日 9:00-18:00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const contactCustomerService = () => {
  console.log('联系客服')
  alert('客服热线：400-888-8888\n工作时间：9:00-18:00')
}

const submitFeedback = () => {
  console.log('提交反馈')
  alert('反馈功能即将上线，敬请期待！')
}
</script>
